<template>
  <div class="massScanCon">
    <div class="row items-center">
      <div class="col btnBox">
        <q-btn
          size="lg"
          label="扫描二维码(交收)"
          class="scanQRbtn color-lightpurple"
          @click="scanQRCodePage = true"
        >
          <q-icon name="fa-solid fa-qrcode" class="qrSVG" />
        </q-btn>
      </div>
    </div>

    <div class="row searchBox">
      <div class="col">
        <q-input
          standout
          dense
          v-model="searchwo"
          placeholder="搜寻工单..."
          bg-color="white"
          :input-style="{ color: 'black' }"
          class="inputBox"
        >
          <template v-slot:prepend>
            <q-icon name="fa-solid fa-magnifying-glass" class="searchSVG" />
          </template>
          <template v-slot:append>
            <q-icon name="close" @click="searchwo = ''" class="closeSVG" />
          </template>
        </q-input>
      </div>
      <div class="col-auto">
        <q-btn
          color="deep-purple-3"
          class="searchBtn"
          @click="filterBox = true"
        >
          <q-icon name="fa-solid fa-filter" class="filterSVG" />
        </q-btn>
        <q-btn color="indigo-3" class="searchBtn" @click="clearFilter()">
          <q-icon name="fa-solid fa-broom" class="clearSVG" />
        </q-btn>
      </div>
    </div>

    <!---------------------------------------------------- WORKER CONTENT ---------------------------------------------------->
    <div v-if="role === 'WORKER'">
      <div
        v-show="!selectAll && !selectAllStart && !selectAllPause"
        class="row selectBtnBox items-center justify-between"
      >
        <div class="col">
          <q-btn
            push
            class="color-yellow selectBtn"
            label="全选已开始"
            @click="selectAllToStart()"
          />
        </div>
        <div class="col">
          <q-btn
            push
            class="color-paused selectBtn"
            label="全选已暂停"
            @click="selectAllToPause()"
          />
        </div>
        <div class="col">
          <q-btn
            push
            class="color-donepurple selectBtn"
            label="全选"
            @click="selectAllToComplete()"
          />
        </div>
      </div>

      <!-- When pressed select-all-start -->
      <div v-show="selectAllStart" class="row selectBtnBox items-center">
        <div class="col">
          <q-btn
            push
            class="color-cancel selectBtn"
            label="取消全选"
            @click="cancelSelectAll('start')"
          />
        </div>
        <div class="col">
          <q-btn
            push
            class="color-paused selectBtn"
            label="暂停全部"
            @click="pauseAllWO()"
          />
        </div>
        <div class="col">
          <q-btn
            push
            class="color-donepurple selectBtn"
            label="完成全部"
            @click="completeAllWO()"
          />
        </div>
      </div>

      <!-- When pressed select-all-pause -->
      <div v-show="selectAllPause" class="row selectBtnBox items-center">
        <div class="col">
          <q-btn
            push
            class="color-cancel selectBtn"
            label="取消全选"
            @click="cancelSelectAll('pause')"
          />
        </div>
        <div class="col">
          <q-btn
            push
            class="color-startgreen selectBtn"
            label="开始全部"
            @click="startAllWO()"
          />
        </div>
        <div class="col">
          <q-btn
            push
            class="color-donepurple selectBtn"
            label="完成全部"
            @click="completeAllWO()"
          />
        </div>
      </div>

      <!-- When pressed select-all -->
      <div v-show="selectAll" class="row selectBtnBox">
        <div class="col">
          <q-btn
            push
            class="color-cancel selectBtn"
            label="取消全选"
            @click="cancelSelectAll('complete')"
          />
        </div>
        <div class="col">
          <q-btn
            push
            class="color-donepurple selectBtn"
            label="完成全部"
            @click="completeAllWO()"
          />
        </div>
      </div>

      <div v-if="!noResult" class="workOrderList">
        <div
          v-for="(wo, index) in woList"
          :key="index"
          class="row justify-center items-center"
        >
          <!-- Select Buttom -->
          <div
            v-show="
              (wo.action === 'start' && selectAllStart) ||
              (wo.action === 'pause' && selectAllPause) ||
              (wo.action !== 'complete' && selectAll)
            "
            class="col-1 selectAllBtnBox text-center"
          >
            <q-icon
              v-if="wo.selected"
              name="fa-solid fa-circle"
              class="selectedSVG"
              @click="toggleSelection(index)"
            />
            <q-icon
              v-else
              name="fa-regular fa-circle"
              class="selectSVG"
              @click="toggleSelection(index)"
            />
          </div>

          <!-- WO In Progress -->
          <div class="col">
            <div
              v-if="wo.action === 'start'"
              class="row workOrderItem inProgress items-center"
            >
              <div class="col-auto woItemIcon">
                <q-icon
                  name="fa-solid fa-clock-rotate-left"
                  class="woItemInProgressSVG"
                  @click="openWORecord(wo.orderNo)"
                />
              </div>
              <div
                class="col woItemSpanBox"
                @click="routeToPage('woOverview', wo.orderNo)"
              >
                <span class="woItemSpan">工单: {{ wo.orderNo }}</span>
              </div>
              <div class="col-auto woItemBtnBox">
                <q-btn
                  push
                  class="color-paused woItemBtn"
                  label="暂停"
                  @click="changeWOStatus(index, 'pause')"
                />
                <q-btn
                  push
                  class="color-donepurple woItemBtn"
                  label="完成"
                  @click="changeWOStatus(index, 'complete')"
                />
              </div>
            </div>

            <!-- WO Paused -->
            <div
              v-else-if="wo.action === 'pause'"
              class="row workOrderItem paused items-center"
            >
              <div class="col-auto woItemIcon">
                <q-icon
                  name="fa-solid fa-circle-pause"
                  class="woItemPausedSVG"
                  @click="openWORecord(wo.orderNo)"
                />
              </div>
              <div
                class="col woItemSpanBox"
                @click="routeToPage('woOverview', wo.orderNo)"
              >
                <span class="woItemSpan">工单: {{ wo.orderNo }}</span>
              </div>
              <div class="col-auto woItemBtnBox">
                <q-btn
                  push
                  class="color-successgreen woItemBtn"
                  label="开始"
                  @click="changeWOStatus(index, 'start')"
                />
                <q-btn
                  push
                  class="color-donepurple woItemBtn"
                  label="完成"
                  @click="changeWOStatus(index, 'complete')"
                />
              </div>
            </div>

            <!-- WO Completed -->
            <div
              v-else-if="wo.action === 'complete'"
              class="row workOrderItem completed items-center"
            >
              <div class="col-auto woItemIcon">
                <q-icon
                  name="fa-solid fa-circle-check"
                  class="woItemCompletedSVG"
                  @click="openWORecord(wo.orderNo)"
                />
              </div>
              <div
                class="col woItemSpanBox"
                @click="routeToPage('woOverview', wo.orderNo)"
              >
                <span class="woItemSpan"
                  >工单: {{ wo.orderNo }} 在 {{ wo.time }} 完成</span
                >
              </div>
            </div>

            <div v-else>你无法取得工单 {{ index }} {{ wo.orderNo }}</div>
          </div>
        </div>
      </div>
      <div
        v-if="noResult && useMassScan.errorWOList.length == 0"
        class="noResultBox"
      >
        <span> 没有工单 </span>
      </div>
      <!---------------------------------------------------- No permission/ Not Found Work orders ---------------------------------------------------->
      <div v-if="useMassScan.errorWOList.length > 0" class="workOrderList">
        <div
          v-for="(ewo, index) in useMassScan.errorWOList"
          :key="index"
          class="row justify-center items-center"
        >
          <div class="col">
            <div class="row workOrderItem errorItem items-center">
              <div class="col-auto woItemIcon">
                <q-icon name="fa-solid fa-exclamation" class="errItemSVG" />
              </div>
              <div class="col woItemSpanBox">
                <span class="woItemSpan"
                  >工单: {{ ewo.orderNo }} {{ ewo.type }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!---------------------------------------------------- OTHERS' CONTENT (QC)---------------------------------------------------->
    <div v-else-if="role === 'QC'">
      <div v-if="!noResult" class="row items-center qcWOBox">
        <div
          v-for="(wo, index) in woList"
          :key="index"
          class="col-12 col-sm-6 woItemBox"
        >
          <!-- WO Review In Progress -->
          <div
            v-if="wo.action === 'start'"
            class="row workOrderItem inProgress items-center"
          >
            <div class="col-auto woItemIcon">
              <q-icon
                name="fa-solid fa-clock-rotate-left"
                class="woItemInProgressSVG"
                @click="openWORecord(wo.orderNo)"
              />
            </div>
            <div
              class="col woItemSpanBox"
              @click="routeToPage('woOverview', wo.orderNo)"
            >
              <span class="woItemSpan">工单: {{ wo.orderNo }} 未完成审核 </span>
            </div>
            <div class="col-auto woItemBtnBox">
              <q-btn
                push
                class="color-donepurple woItemBtn"
                label="审核"
                @click="qcStartReview(wo.orderNo)"
              />
            </div>
          </div>

          <!-- WO Completed -->
          <div
            v-else-if="wo.action === 'complete'"
            class="row workOrderItem completed items-center"
          >
            <div class="col-auto woItemIcon">
              <q-icon
                name="fa-solid fa-circle-check"
                class="woItemCompletedSVG"
                @click="openWORecord(wo.orderNo)"
              />
            </div>
            <div
              class="col woItemSpanBox"
              @click="routeToPage('woOverview', wo.orderNo)"
            >
              <span class="woItemSpan"
                >工单: {{ wo.orderNo }} 在 {{ wo.time }} 完成审核
              </span>
            </div>
          </div>

          <!-- Unknown WOstatus -->
          <div v-else>你无法取得工单 {{ index }} {{ wo.orderNo }}</div>
        </div>
      </div>
      <div
        v-if="noResult && useMassScan.errorWOList.length == 0"
        class="noResultBox"
      >
        <span> 没有工单 </span>
      </div>
      <!---------------------------------------------------- No permission/ Not Found Work orders ---------------------------------------------------->
      <div v-if="useMassScan.errorWOList.length > 0" class="workOrderList">
        <div
          v-for="(ewo, index) in useMassScan.errorWOList"
          :key="index"
          class="row justify-center items-center"
        >
          <div class="col">
            <div class="row workOrderItem errorItem items-center">
              <div class="col-auto woItemIcon">
                <q-icon name="fa-solid fa-exclamation" class="errItemSVG" />
              </div>
              <div class="col woItemSpanBox">
                <span class="woItemSpan"
                  >工单: {{ ewo.orderNo }} {{ ewo.type }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!---------------------------------------------------- No access right for this page ---------------------------------------------------->
    <div v-else>
      <span> 您无权访问此页面。 </span>
    </div>

    <!---------------------------------------------------- DIALOG / SUB-PAGES ---------------------------------------------------->

    <!-- Filter Function -->
    <q-dialog v-model="filterBox" class="filterBox">
      <q-card style="min-width: 350px">
        <q-card-section
          class="bg-deep-purple-9 text-white row items-center justify-center"
        >
          <div class="text-h6 f-bold">筛选</div>
        </q-card-section>

        <q-card-section v-if="role === 'WORKER'" class="q-pt-none titleBox">
          <span>显示以下状态的工单:</span>
          <div class="filterChoices">
            <q-checkbox
              v-model="filterStart"
              val="start"
              label="已开始"
              color="warning"
            />
            <q-checkbox
              v-model="filterPause"
              val="pause"
              label="暂停"
              color="red-6"
            />
            <q-checkbox
              v-model="filterComplete"
              val="complete"
              label="完成"
              color="indigo-8"
            />
          </div>
        </q-card-section>

        <q-card-section v-if="role === 'QC'" class="q-pt-none titleBox">
          <span>显示以下状态的工单:</span>
          <div class="filterChoices">
            <q-checkbox
              v-model="filterStart"
              val="start"
              label="已开始"
              color="warning"
            />
            <q-checkbox
              v-model="filterComplete"
              val="complete"
              label="完成"
              color="indigo-8"
            />
          </div>
        </q-card-section>

        <q-card-actions align="center" class="text-primary">
          <q-btn color="grey-8" label="取消" v-close-popup />
          <q-btn
            color="deep-purple-6"
            label="确定"
            v-close-popup
            @click="filterSortWO()"
          />
        </q-card-actions>
      </q-card>
    </q-dialog>

    <!-- QR CODE SCANNER -->
    <q-dialog
      v-model="scanQRCodePage"
      maximized
      transition-show="slide-up"
      transition-hide="slide-down"
    >
      <q-layout container class="scanQRDialog">
        <div class="row items-center justify-center titleBox">
          <div class="col text-center">
            <span class="titleText">扫描二维码 (交收)</span>
          </div>
          <div class="col-auto">
            <q-btn
              icon="close"
              flat
              round
              dense
              v-close-popup
              class="closeBtn"
            />
          </div>
        </div>
        <hr class="titleHr" />
        <ScanQRCodeMulti @closeScanQR="closeScanQRCodePage"></ScanQRCodeMulti>
      </q-layout>
    </q-dialog>

    <!-- WO Record Page -->
    <q-dialog
      v-model="woRecordPage"
      maximized
      transition-show="slide-right"
      transition-hide="slide-left"
    >
      <q-layout container class="woRecordDialog">
        <div class="row items-center justify-center titleBox">
          <div class="col text-center">
            <span class="titleText">工单工作纪录</span>
          </div>
          <div class="col-auto">
            <q-btn
              icon="close"
              flat
              round
              dense
              v-close-popup
              class="closeBtn"
            />
          </div>
        </div>
        <hr class="titleHr" />
        <WORecordPage :rpOrderNo="rpOrderNo"></WORecordPage>
      </q-layout>
    </q-dialog>
  </div>
</template>

<script setup>
import { ref, toRaw, watch } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import { useUserStore } from "src/stores/modules/userStore";
import { useMassScanStore } from "src/stores/modules/massScanStore";
import { useWOReviewStore } from "src/stores/modules/woReviewStore";
import ScanQRCodeMulti from "src/components/ScanQRCodeMulti.vue";
import WORecordPage from "./WORecordPage.vue";

const $router = useRouter();
const $q = useQuasar();
const userStore = useUserStore();
const useMassScan = useMassScanStore();
const reviewStore = useWOReviewStore();

const scanQRCodePage = ref(false);

// wo record sub-page
const woRecordPage = ref(false);
const rpOrderNo = ref("");

// Search Bar
const searchwo = ref("");
const noResult = ref(false);

// Filter Function
const filterBox = ref(false);
const filterStart = ref(false); // Worker, QC
const filterPause = ref(false); // Worker
const filterComplete = ref(false); // Worker, QC

// Get Role
const role =
  userStore.currentDept != null ? userStore.currentDept.roleGroup : null;
const roleName =
  userStore.currentDept != null ? userStore.currentDept.role : null;
const accID = userStore.currentDept.accID;

// Load Mass Scan Page
let originalWoList = [];
const woList = ref([]);

const initMassScanPage = async () => {
  console.log("initializing Mass Scan Page...");
  // testing call api
  const res = await useMassScan.loadMassScan(accID, roleName);
  if (res) {
    if (useMassScan.workOrderList.length > 0) {
      const wol = useMassScan.getWorkOrderList;
      woList.value = [];
      woList.value = [...JSON.parse(JSON.stringify(toRaw(wol)))];
      originalWoList = [...JSON.parse(JSON.stringify(toRaw(wol)))];
      noResult.value = false;
    } else {
      noResult.value = true;
    }
  } else {
    // alert: cannot load work orders
    noResult.value = true;
    $q.notify({
      type: "negative",
      textColor: "white",
      message: "错误发生 !",
      timeout: 2000,
      position: "center",
    });
  }

  originalWoList = [...JSON.parse(JSON.stringify(toRaw(woList.value)))];

  console.log("work order list: ", woList.value);
};

initMassScanPage();
useMassScan.initErrorWOList();

// Function: Search Work Order from search bar
watch(searchwo, () => {
  noResult.value = false;
  const result = originalWoList.filter((w) =>
    w.orderNo.startsWith(searchwo.value)
  );
  if (result.length > 0) {
    woList.value = result;
  } else {
    woList.value = [];
    noResult.value = true;
  }
});

// Function: Filter / Sort WO
const filterSortWO = () => {
  if (role === "WORKER") {
    if (filterStart.value || filterPause.value || filterComplete.value) {
      let filterResult = [];
      let filterResults = [];
      let filterResultp = [];
      let filterResultc = [];
      if (filterStart.value) {
        filterResults = originalWoList.filter((w) => w.action === "start");
      }
      if (filterPause.value) {
        filterResultp = originalWoList.filter((w) => w.action === "pause");
      }
      if (filterComplete.value) {
        filterResultc = originalWoList.filter((w) => w.action === "complete");
      }

      filterResult = filterResult.concat(
        filterResults,
        filterResultp,
        filterResultc
      );
      if (filterResult.length === 0) {
        console.log("no Match case");
        noResult.value = true;
      } else {
        console.log("filterResult: ", filterResult);
        woList.value = filterResult;
      }
    } else {
      // woList.value = originalWoList;
      initMassScanPage();

    }
  } else if (role === "QC") {
    let filterResult = [];
    if (filterStart.value) {
      filterResult = originalWoList.filter((w) => w.action === "start");
    } else if (filterComplete.value) {
      filterResult = originalWoList.filter((w) => w.action === "complete");
    }

    if (
      (filterStart.value && filterComplete.value) ||
      (!filterStart.value && !filterComplete.value)
    ) {
      filterResult = originalWoList;
    }

    if (filterResult.length === 0) {
      console.log("no Match case");
      noResult.value = true;
    } else {
      console.log("filterResult: ", filterResult);
      woList.value = filterResult;
    }
  }
};

// Function: Clear Filter
const clearFilter = () => {
  console.log("clear filter");
  woList.value = originalWoList;
  // Search Bar
  searchwo.value = "";
  // Filter
  filterStart.value = false;
  filterPause.value = false;
  filterComplete.value = false;
  // Show no result msg
  noResult.value = false;
};

// Function: Open Work Order Record Page
const openWORecord = (orderNo) => {
  console.log("wo: ", orderNo);
  rpOrderNo.value = orderNo;
  woRecordPage.value = true;
};

// WORKER
const selectAllStart = ref(false);
const selectAllPause = ref(false);
const selectAll = ref(false);

// Function: Clicked Select All Start Btn
const selectAllToStart = () => {
  selectAllStart.value = true;
  woList.value.forEach((w) => {
    // console.log("Set select to false - orderNo:"+w.orderNo)
    w.selected = false;
  });
  woList.value.forEach((w) => {
    if (w.action === "start") {
      // console.log("Set select to true - orderNo:"+w.orderNo)
      w.selected = true;
    }
  });
};

// Function: Clicked Select All Pause Btn
const selectAllToPause = () => {
  selectAllPause.value = true;
  woList.value.forEach((w) => {
    w.selected = false;
  });
  woList.value.forEach((w) => {
    if (w.action === "pause") {
      w.selected = true;
    }
  });
};

// Function: Clicked Select All Btn
const selectAllToComplete = () => {
  selectAll.value = true;
  woList.value.forEach((w) => {
    w.selected = false;
  });
  woList.value.forEach((w) => {
    if (w.action !== "complete") {
      w.selected = true;
    }
  });
};

// Function: Clicked Start All Btn
const startAllWO = async () => {
  let woArray = [];
  woList.value.forEach(async (w) => {
    if (w.action === "pause" && w.selected) {
      woArray.push(w.orderNo);
    }
  });
  console.log("order to start:" + woArray);
  const res = await useMassScan.changeWOStatus(accID, woArray, "start");
  console.log("start all:", res);
  if (res) {
    woList.value.forEach(async (w) => {
      if (w.action === "pause" && w.selected) {
        w.action = "start";
      }
    });
    $q.notify({
      type: "positive",
      textColor: "white",
      message: "成功开始了所有工单!",
      timeout: 2000,
      position: "center",
    });
  } else {
    $q.notify({
      type: "negative",
      textColor: "white",
      message: "错误发生 !",
      timeout: 2000,
      position: "center",
    });
  }
  selectAllPause.value = false;
};

// Function: Clicked Pause All Btn
const pauseAllWO = async () => {
  let woArray = [];
  woList.value.forEach(async (w) => {
    if (w.action === "start" && w.selected) {
      console.log("w.orderNo:" + w.orderNo);
      woArray.push(w.orderNo);
    }
  });
  const res = await useMassScan.changeWOStatus(accID, woArray, "pause");
  console.log("pause all:", res);
  if (res) {
    woList.value.forEach(async (w) => {
      if (w.action === "start" && w.selected) {
        w.action = "pause";
      }
    });
    $q.notify({
      type: "positive",
      textColor: "white",
      message: "成功暂停了所有工单!",
      timeout: 2000,
      position: "center",
    });
  } else {
    $q.notify({
      type: "negative",
      textColor: "white",
      message: "错误发生 !",
      timeout: 2000,
      position: "center",
    });
  }
  selectAllStart.value = false;
};

// Function: Clicked Complete All Btn
const completeAllWO = async () => {
  let woArray = [];
  woList.value.forEach(async (w) => {
    if (w.action !== "complete" && w.selected) {
      woArray.push(w.orderNo);
    }
  });
  const res = await useMassScan.changeWOStatus(accID, woArray, "complete");
  woList.value.forEach(async (w) => {
    if (w.action !== "complete" && w.selected) {
      w.action = "complete";
    }
  });
  console.log("complete all:", res);
  if (res) {
    $q.notify({
      type: "positive",
      textColor: "white",
      message: "成功完成了所有工单!",
      timeout: 2000,
      position: "center",
    });
  } else {
    $q.notify({
      type: "negative",
      textColor: "white",
      message: "错误发生 !",
      timeout: 2000,
      position: "center",
    });
  }
  selectAllPause.value = false;
  selectAllStart.value = false;
  selectAll.value = false;
};

// Function: Clicked Cancel Select All Btn
const cancelSelectAll = (action) => {
  action === "start"
    ? (selectAllStart.value = false)
    : action === "pause"
    ? (selectAllPause.value = false)
    : action === "complete"
    ? (selectAll.value = false)
    : console.log("Cannot Cancel due to unknown action");
  woList.value.forEach((w) => {
    w.selected = false;
  });
};

const toggleSelection = (index) => {
  woList.value[index].selected = !woList.value[index].selected;
};

const routeToPage = (page, orderNo) => {
  console.log("route to page orderNo: ", orderNo);
  page === "woOverview"
    ? $router.push(`/WODetails/${orderNo}`)
    : console.log("no this page");
};

const changeWOStatus = async (index, action) => {
  let res = null;
  const woArray = [];
  let msg = null;
  if (action === "start") {
    woList.value[index].action = "start";
    woArray.push(woList.value[index].orderNo);
    res = await useMassScan.changeWOStatus(accID, woArray, "start");
    msg = "成功开始了工单!";
  } else if (action === "pause") {
    woList.value[index].action = "pause";
    woArray.push(woList.value[index].orderNo);
    res = await useMassScan.changeWOStatus(accID, woArray, "pause");
    msg = "成功暂停了工单!";
  } else if (action === "complete") {
    woList.value[index].action = "complete";
    woArray.push(woList.value[index].orderNo);
    res = await useMassScan.changeWOStatus(accID, woArray, "complete");
    msg = "成功完成了工单!";
  } else {
    console.log("Action Not Found");
  }

  if (res) {
    console.log("success");
    $q.notify({
      type: "positive",
      textColor: "white",
      message: msg,
      timeout: 2000,
      position: "center",
    });
  } else {
    $q.notify({
      type: "negative",
      textColor: "white",
      message: "错误发生 !",
      timeout: 2000,
      position: "center",
    });
  }
};

// close ScanQR page
const closeScanQRCodePage = () => {
  scanQRCodePage.value = false;
  initMassScanPage();
};

// QC Part
// Function: QC Start Review WO
const qcStartReview = async (woNo) => {
  $router.push(`/WODetails/${woNo}/${"wot"}`);
};
</script>

<style lang="scss">
.massScanCon {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  @media (min-width: 480px) {
    font-size: 1rem;
  }

  .btnBox {
    width: 100%;
    .scanQRbtn {
      width: 100%;
      margin-top: 20px;
      margin-bottom: 20px;
      border-radius: 10px;
      font-size: 1.8rem !important;
      font-weight: 500;
      @media (max-width: 480px) {
        font-size: 1.5rem !important;
      }
      .qrSVG {
        margin-left: 10px;
      }
    }
  }

  .searchBox {
    background-color: #3a356a;
    width: 100%;
    padding: 18px 18px 18px 18px;
    text-align: center;
    border-radius: 5px 5px 0px 0px;
    @media (max-width: 480px) {
      padding: 10px 10px 10px 10px;
    }
    .q-field__control,
    .q-field,
    .q-field__inner {
      font-size: 1rem;
      height: 100%;
    }

    .searchSVG {
      margin-top: 15px;
      margin-bottom: auto;
      color: black;
      @media (max-width: 480px) {
        margin-top: 10px;
        font-size: 1rem;
      }
    }

    .closeSVG {
      margin-top: 15px;
      margin-bottom: auto;
      color: black;
      @media (max-width: 480px) {
        margin-top: 10px;
        font-size: 1.2rem;
      }
    }

    .searchBtn {
      margin-left: 10px;
    }

    .sortSVG,
    .filterSVG,
    .clearSVG {
      padding-top: 5px;
      padding-bottom: 5px;
      font-size: 2.7em;
      @media (max-width: 480px) {
        font-size: 5.2vw;
      }
    }
  }

  .selectBtnBox {
    background-color: #d9d9d9;
    width: 100%;
    padding: 10px 10px 10px 10px;
    text-align: center;
    @media (max-width: 480px) {
      padding: 5px 5px 10px 5px;
    }
    .selectBtn {
      width: 90%;
      font-size: 1rem;
      @media (max-width: 480px) {
        font-size: 0.7rem;
      }
    }
  }

  .workOrderList {
    background-color: white;
    width: 100%;
    padding: 5px 10px 5px 10px;
    @media (max-width: 480px) {
      padding: 5px 5px 5px 5px;
    }

    .selectAllBtnBox {
      .selectSVG,
      .selectedSVG {
        font-size: 1rem;
        @media (max-width: 480px) {
          font-size: 1rem;
        }
        color: #6456c8;
      }
    }
    .workOrderItem {
      width: 100%;
      padding: 5px 10px 5px 10px;
      margin-top: 5px;
      margin-bottom: 3px;
      border-radius: 3px;
      @media (max-width: 480px) {
        padding: 5px 5px 5px 5px;
      }
      .woItemInProgressSVG {
        color: #ffc700;
        font-size: 1.2em;
        @media (max-width: 480px) {
          font-size: 1.2rem;
        }
      }
      .woItemPausedSVG {
        color: #eb0000;
        font-size: 1.2em;
        @media (max-width: 480px) {
          font-size: 1.2rem;
        }
      }
      .woItemCompletedSVG {
        color: #24c734;
        font-size: 1.2em;
        @media (max-width: 480px) {
          font-size: 1.2rem;
        }
      }
      .woItemSpanBox {
        padding-left: 0.6rem;
        font-size: 1.2rem;
        font-weight: 600;
        @media (max-width: 480px) {
          padding-left: 3px;
          font-size: 0.8rem;
        }
      }
      .woItemBtnBox {
        .woItemBtn {
          margin-left: 5px;
          font-size: 1rem;
          @media (max-width: 480px) {
            font-size: 0.7rem;
          }
        }
      }
    }
    .inProgress {
      background-color: #ffe588;
    }
    .paused {
      background-color: #fd7474;
    }
    .completed {
      background-color: #8fd896;
    }
  }

  .noResultBox {
    background-color: white;
    width: 100%;
    padding: 5px 10px 5px 10px;
    text-align: center;
    @media (max-width: 480px) {
      padding: 5px 5px 5px 5px;
      font-size: 1rem;
    }
  }
  .qcWOBox {
    background-color: white;
    width: 100%;
    height: fit-content;
    padding: 10px 10px 5px 10px;
    .woItemBox {
      padding-left: 3px;
      padding-right: 3px;
      @media (max-width: 599px) {
        margin-top: 3px;
        margin-bottom: 3px;
      }
    }

    .workOrderItem {
      width: 100%;
      height: 60px;
      margin-bottom: 5px;
      padding: 10px 10px 10px 10px;
      border-radius: 3px;

      .woItemInProgressSVG {
        color: #ffc700;
        font-size: 1.5em;
        @media (max-width: 480px) {
          font-size: 1.2rem;
        }
      }
      .woItemCompletedSVG {
        color: #24c734;
        font-size: 1.5em;
        @media (max-width: 480px) {
          font-size: 1.2rem;
        }
      }

      .woItemSpanBox {
        padding-left: 0.6rem;
        font-size: 1.2rem;
        font-weight: 600;
        @media (min-width: 481px) {
          font-size: 1rem;
        }
        @media (max-width: 480px) {
          padding-left: 3px;
          font-size: 0.8rem;
        }
      }
      .woItemBtnBox {
        .woItemBtn {
          margin-left: 5px;
          font-size: 1rem;
        }
      }
    }
    .inProgress {
      background-color: #ffe588;
    }
    .completed {
      background-color: #8fd896;
    }
  }
}

.scanQRDialog,
.woRecordDialog {
  background-image: linear-gradient(#6456c8, #9eabea, #cad9ff);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-color: #6456c8;
  color: white;

  .titleBox {
    margin-top: 10px;
  }

  .closeBtn {
    margin-right: 5px;
  }

  .titleText {
    padding-left: 5px;
  }

  .titleHr {
    margin-top: 10px;
  }
}

.filterBox {
  .titleBox {
    margin-top: 10px;
    font-size: 1rem;
    text-align: center;
    @media (min-width: 480px) {
      font-size: 1rem;
    }
  }
}

.errItemSVG {
  color: #797979;
  font-size: 1.2em;
  @media (max-width: 480px) {
    font-size: 1.2rem;
  }
}

.errorItem {
  background-color: #cacaca;
}
</style>
